<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>订单详情统计</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="/report/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/animate.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/style.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/style-responsive.min.css" rel="stylesheet"/>
    <link href="/report/assets/css/theme/default.css" rel="stylesheet" id="theme"/>
    <link href="/report/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/gritter/css/jquery.gritter.css" rel="stylesheet"/>
    <!-- ================== END BASE CSS STYLE ================== -->

    <link href="/report/assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet"/>
    <link href="/report/assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="/report/common/css/commonCSS.css" rel="stylesheet">
	<link rel="stylesheet" href="/report/assets/css/style_lanling.css">
</head>

<body class="pace-done" style="min-width:1015px">
<div class="fade in hide" id="page-loader"><span class="spinner"></span></div>
<div id="page-container" class="fade in">
    <div id="content" class="content">
        <ol class="breadcrumb pull-right">

        </ol>
        <div class="row">
            <h1 class="page-header">
                <span class="page-header-span">订单详情统计</span>
                <i data-toggle="tooltip" data-placement="right" title="统计明天或以后的订单详情"
                   class="fa fa-question-circle"></i>
            </h1>
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title" id="chartHead">
                        订单详情统计
                    </h4>
                </div>
                <div class="panel-body">
                    <input type="hidden" id="saveURL" value="/wechatprogram/webreport/listDetailData"/>
                    <div style="font-size:0;" class="text-right">
                        <div class="btn-group m-r-4" style="margin-bottom:18px;">
                            <button id="myDropdown" type="button" class="ttw btn-toggle btn btn-primary dropdown-toggle"
                                    aria-haspopup="true" aria-expanded="false">明天<span
                                    class="caret"></span></button>
                            <ul class="dropdown-menu" style="min-width: 275px;">
                                <li><a class="ttw5" data-p="" href="javascript:;">明天</a></li>
                                <li><a class="ttw6" data-p="" href="javascript:;">后天</a></li>
                                <li style="height: 120px; padding-top: 10px;margin-top: 10px;border-top: 1px solid #e2e7e8;">
                                    <span style="margin-left: 15px">自定义时间范围：</span>
                                    <div class="form-inline text-center">
                                        <input id="tm7" size="16" readonly=""
                                               class="form-control form_datetime m-2 input-sm" name="time"
                                               type="text">
                                    </div>
                                    <div style="padding-top: 10px;margin-top: 4px;border-top: 1px solid #e2e7e8;"
                                         class="text-center">
                                        <button class="btn btn-primary m-2" style="width:97%;" type="button"
                                                onclick="$('#myDropdown').parent().removeClass('open');queryAllNew('',1)">
                                            确认
                                        </button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <button type="button" onclick="exportExcel_new()" class="btn btn-primary pull-right f-s-14"><i
                                class="glyphicon glyphicon-download"></i>&nbsp;导出报表
                        </button>
                    </div>
                    <div class="row m-t-15">
                        <div class="col-md-6">
                            <div id="main" style="height:400px;"></div>
                        </div>
                        <div class="col-md-6">
                            <div id="mainPie" style="height:400px;"></div>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>日期&nbsp;<i data-toggle="tooltip" data-placement="right" title="查询时间小于三天按小时显示与统计，时间大于三天并且小于32天按天显示与统计，时间大于32天按月显示与统计"
                                class="fa fa-question-circle"></i></th>
                            <th>姓名&nbsp;<i data-toggle="tooltip" data-placement="right" title="订餐人的姓名"
                                               class="fa fa-question-circle"></i></th>
                            <th>电话&nbsp;<i data-toggle="tooltip" data-placement="right" title="订餐人的电话"
                                class="fa fa-question-circle"></i></th>
                            <th>早餐菜品&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日已点早餐的菜品"
                                               class="fa fa-question-circle"></i></th>
                            <th>午餐菜品&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日已点午餐的菜品"
                                             class="fa fa-question-circle"></i></th>
                            <th>晚餐菜品&nbsp;<i data-toggle="tooltip" data-placement="right" title="当日已点晚餐的菜品"
                                             class="fa fa-question-circle"></i></th>
                        </tr>
                        </thead>
                        <tbody id="visitDataTable">
                        </tbody>
                    </table>
<!--                    <div id="pageList"></div>-->
                </div>
            </div>
        </div>
    </div>
    <a data-click="scroll-top" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade" href="javascript:;"><i
            class="fa fa-angle-up"></i></a>

    <div id="full-screen-loading"></div>
</div>
<!-- ================== BEGIN BASE JS ================== -->
<script src="/report/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="/report/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="/report/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="/report/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/report/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/report/assets/plugins/gritter/js/jquery.gritter.js"></script>
<script src="/report/assets/js/apps.min.js"></script>

<![endif]-->
<!-- ================== END BASE JS ================== -->

<script src="/report/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/report/common/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="/report/assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="/report/common/js/customMethod.js"></script>
<script src="/report/common/js/echarts/echarts.min.js"></script>
<script src="/report/common/js/echarts/macarons.js"></script>
<script src="/report/common/js/countUp.js"></script>
<script src='/report/common/js/commonJs.js'></script>
<script src="/report/js/util.js"></script>
<script type="text/javascript">

    function showtable (json) {
        var table = ''
        var Dlen = json.data.list.rows.length
        if (Dlen == 0) {
            table += '<tr >'
            table += '<td colspan=5 style=\'text-align:center\'><i class=\'glyphicon glyphicon-warning-sign\'></i>暂无数据</td>'
            table += '</tr>'
            $('#visitDataTable').html(table)
            // $("#pageList").html("")
            return
        }
        for (var t = 0; t < Dlen; t++) {
            if (json.data.list.rows[t].earlyMenuNames === null) {
                json.data.list.rows[t].earlyMenuNames = "无";
            }
            if (json.data.list.rows[t].middayMenuNames === null) {
                json.data.list.rows[t].middayMenuNames = "无";
            }
            if (json.data.list.rows[t].eveningMenuNames === null) {
                json.data.list.rows[t].eveningMenuNames = "无";
            }
            table += '<tr>'
            table += '<td>' + json.data.list.rows[t].day + '</td>'
            table += '<td>' + json.data.list.rows[t].buyerName + '</td>'
            table += '<td>' + json.data.list.rows[t].buyerPhone + '</td>'
            table += '<td>' + json.data.list.rows[t].earlyMenuNames + '</td>'
            table += '<td>' + json.data.list.rows[t].middayMenuNames + '</td>'
            table += '<td>' + json.data.list.rows[t].eveningMenuNames + '</td>'
            table += '</tr>'
        }
        $('#visitDataTable').html(table)
        //下面开始处理分页
        // var options = {
        //     data: [json.data, 'list', 'total'],
        //     currentPage: 1,
        //     totalPages: 10,
        //     onPageClicked: function (event, originalEvent, type, page) {
        //         queryAllNew(page)
        //     }
        // }
        // setPage('pageList', options)
    }

    function analysis (json) {
        //图表变量
        var myChart1 = echarts.init(document.getElementById('main'), 'macarons')
        var myChart2 = echarts.init(document.getElementById('mainPie'), 'macarons')

        //画图一
        var len=0;
        if(json.data.menuList){
            len = json.data.menuList.length
        }
        var temp = []
        if (len > 0) {
            for (var i = 0; i < len; i++) {
                var map = {}
                map.name = json.data.menuList[i].menuName
                map.value = json.data.menuList[i].menuCount
                temp.push(map)
            }
        } else {
            var map = {}
            map.name = '暂无数据'
            map.value = 0
            temp.push(map)
        }
        // 初始 option2
        option1 = {
            title: {
                text: '餐品被点数量统计'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}次({d}%)'
            },
            toolbox: {
                show: true,
                x: 'right',
                y: 'center',
                orient: 'vertical',
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '餐品数量',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: temp
            }]
        }

        myChart1.hideLoading()
        myChart1.setOption(option1)

        //画图二
        var len=0;
        if(json.data.categoryList){
            len = json.data.categoryList.length
        }
        var temp = []
        if (len > 0) {
            for (var i = 0; i < len; i++) {
                var map = {}
                map.name = json.data.categoryList[i].categoryName
                map.value = json.data.categoryList[i].categoryCount
                temp.push(map)
            }
        } else {
            var map = {}
            map.name = '暂无数据'
            map.value = 0
            temp.push(map)
        }
        // 初始 option2
        option2 = {
            title: {
                text: '餐品类型统计'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}次({d}%)'
            },
            toolbox: {
                show: true,
                x: 'right',
                y: 'center',
                orient: 'vertical',
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '就餐人数',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: temp
            }]
        }

        myChart2.hideLoading()
        myChart2.setOption(option2)

        $(window).resize(function () {
            $(myChart1).resize()
            $(myChart2).resize()
        })
    }

    //回调函数
    function callback_chart (json) {
        analysis(json)
        showtable(json)
    }

</script>
<script type="text/javascript">
    $(document).ready(function () {
        App.init()
        InitHeaderRadio()
        formatDateTime()
        selectGenNew()
        // 请求数据
        queryAllNew()
        //饼图
        var myChart1 = echarts.init(document.getElementById('main'), 'macarons')
        var myChart2 = echarts.init(document.getElementById('mainPie'), 'macarons')
        myChart1.showLoading()
        myChart2.showLoading()
    })
</script>
</body>
</html>
